<template>
	<view class="content">
		<view class="od-banner">
			<img class="od-banner-icon" src="/static/images/od_bg_icon.png" mode="widthFix" />
			<view class="od-jd" :class="[`od-jd-${item}`]">
				<view class="od-jd-out">
					<view class="od-jd-in"></view>
				</view>
				<view class="vp-flex od-jd-text">
					<view class="vp-flex_1">
						<text class="od-jd-st-0">填写订单</text>
					</view>
					<view class="vp-flex_1">
						<text class="od-jd-st-10">在线支付</text>
					</view>
					<view class="vp-flex_1">
						<text class="od-jd-st-20">专人服务</text>
					</view>
					<view class="vp-flex_1">
						<text class="od-jd-st-30">服务完成</text>
					</view>
				</view>
			</view>
		</view>
		<view class="pub-box">
			<view class="pub-box_title">
				<view class="title_image">
					<image src="../../static/logo.png" mode=""></image>
				</view>
				<view class="name">
					代码
				</view>

			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		getCurrentInstance,
		onMounted
	} from "vue";
	import {
		onLoad
	} from '@dcloudio/uni-app'
	const {
		proxy
	} = getCurrentInstance();
	const {
		item
	} = defineProps(["item"]);
	onLoad((options) => {
		main_load(options)
	})
	const app = getApp()
	const servers = ref({})
	const main_load = (options) => {
		app.globalData.utils.request({
			url: '/Service/order',
			data: {
				svid: options.svid
			},
			success: (res) => {
				console.log(res);
				servers.value = res.data.service
			}
		})
	}
</script>

<style lang="less" scoped>
	.content {
		background-color: #fcfcfc;
	}

	.vp-flex {
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
	}

	.vp-flex_1 {
		-webkit-box-flex: 1;
		-webkit-flex: 1;
		-ms-flex: 1;
		flex: 1;
		-webkit-tap-highlight-color: transparent;
	}

	.od-banner {
		overflow: hidden;
		position: relative;
		background: url("") repeat-y center;
		background-size: 100%;
	}

	.od-banner-icon {
		position: absolute;
		top: 15px;
		right: -10px;
		width: 65px;
		opacity: 0.6;
	}

	.od-jd {
		margin: 30px 20px;
	}

	.od-jd-out {
		background: #ffffff;
		border: 2.5px solid #ffffff;
		height: 10px;
		line-height: 10px;
		border-radius: 25px;
		overflow: hidden;
		position: relative;
	}

	.od-jd-in {
		height: 10px;
		line-height: 10px;
		border-radius: 25px;
		overflow: hidden;
		width: 0%;
		background: url("") repeat-y center;
		background-size: 100%;
	}

	.od-jd-text {
		text-align: center;
		padding-top: 15px;
	}

	.od-jd-text text {
		color: #ffffff;
		font-size: 13px;
		opacity: 0.7;
	}

	.od-jd-0 .od-jd-in {
		width: 12%;
	}

	.od-jd-0 .od-jd-st-0 {
		opacity: 1;
		font-weight: bold;
	}

	.od-jd-10 .od-jd-in {
		width: 37%;
	}

	.od-jd-10 .od-jd-st-10 {
		opacity: 1;
		font-weight: bold;
	}

	.od-jd-20 .od-jd-in {
		width: 64%;
	}

	.od-jd-20 .od-jd-st-20 {
		opacity: 1;
		font-weight: bold;
	}

	.od-jd-30 .od-jd-in {
		width: 100%;
	}

	.od-jd-30 .od-jd-st-30 {
		opacity: 1;
		font-weight: bold;
	}

	.od-jd-40 .od-jd-in {
		width: 100%;
		background: #999999;
	}

	.pub-box {
		border: 1px solid red;
		position: relative;
		left: 50%;
		transform: translate(-50%, -20%);
		height: 250rpx;
		width: 95%;
		border-radius: 20rpx;
		background-color: #ffffff;

		.pub-box_title {
			display: flex;

			.title_image {
				width: 40rpx;
				height: 40rpx;

				image {
					display: block;
					width: 40rpx;
					height: 40rpx;
				}
			}


		}
	}
</style>